import { useMemo, useRef } from 'react'
import { useNavigate } from 'react-router'
import { useSessionStorageState } from 'ahooks'
import { Button, Input, Radio, Space, theme } from 'antd'
import type { TextAreaRef } from 'antd/es/input/TextArea'
import { SearchOutlined } from '@ant-design/icons'

import { Header, Wrap } from './components'
import { TType } from './interface'
import { inpTip, inpValueParse, rmSeparator, useCommon } from './utils'
import styles from './styles.module.less'

export const Home = () => {
  useCommon('home')
  const navigate = useNavigate()
  const { token } = theme.useToken()

  const [_t, setType] = useSessionStorageState<TType>('fba_Track_Home_type')
  const [_v, setValue] = useSessionStorageState<string>('fba_Track_Home_value')
  const type = _t === 'fbaIds' ? 'fbaIds' : 'waybillNos'
  const value = typeof _v === 'string' ? _v : ''
  const { list, listVal, listJoinEncode } = useMemo(() => inpValueParse(value), [value])

  const textAreaRef = useRef<TextAreaRef>(null)
  const btnRef = useRef<HTMLButtonElement>(null)

  return (
    <Wrap>
      <Header />
      <div className={styles.main}>
        <div className={styles.Home}>
          <div className={styles.Home_title}>SHIPMENT TRACKING</div>

          <Space style={{ width: '100%' }} direction="vertical" size={20}>
            <Space style={{ width: '100%', justifyContent: 'space-between' }}>
              <Radio.Group style={{ fontWeight: 'bold' }} value={type} onChange={e => setType(e.target.value)}>
                <Radio value="waybillNos">FBABEE Shipment ID</Radio>
                <Radio value="fbaIds">FBA Shipment ID</Radio>
              </Radio.Group>
              <span style={{ color: token.colorTextQuaternary }}>{inpTip}</span>
            </Space>

            <Input.TextArea
              ref={textAreaRef}
              autoFocus
              allowClear
              placeholder={inpTip}
              autoSize={{ minRows: 4, maxRows: 12 }}
              value={value}
              onChange={e => setValue(rmSeparator(e.target.value))}
              onBlur={e => {
                if (e.relatedTarget !== btnRef.current && value) setValue(listVal)
              }}
            />

            <Space style={{ width: '100%', justifyContent: 'space-between' }}>
              <span style={{ color: token.colorTextSecondary }}>
                A total of <b>{list.length}</b> IDs have been entered
              </span>
              <Button
                ref={btnRef}
                style={{ width: 130 }}
                size="large"
                type="primary"
                icon={<SearchOutlined />}
                onClick={() => {
                  if (!list.length) {
                    setValue('')
                    textAreaRef.current?.focus()
                    return
                  }
                  navigate(
                    { pathname: '/track/result', search: `type=${type}&value=${listJoinEncode}` },
                    { viewTransition: true },
                  )
                }}
              >
                Track
              </Button>
            </Space>
          </Space>
        </div>
      </div>
    </Wrap>
  )
}
